<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 定位，将元素正确布局
		     ①浮动定位：左右布局
			 ②相对定位：微调布局    
			 
			 position：relative； 声明元素进行相对定位
			 特点相对一父级进行定位，不脱离文档流
			 附加属性：方向属性：left、top、right、bottom，
			 属性值：正负数值px
			        z叠加属性：z-index---属性值：数值，数值越大，越靠前
		
			 ③绝对定位：叠加效果，通常与相对定位搭配使用，左栏、侧边栏、遮罩栏
			            左栏---挂靠点
			 position：absolute；声明元素进行绝对定位
			 特点：相对于祖先【页面左上顶角】进行定位、
			 如果有父元素，按照父元素【左上顶角】、脱离文档流
			 使用方法：通常与相对定位搭配使用
			 
			 ④固定定位：fiexd  页面区域固定在页面上 
		      相对、绝对、固定附加属性全部通用
			
			 ⑤文档流定位：按照元素分类进行定位：块与块【纵排】
			                                行与行【横排】
											块与行【横排】
		 -->
		 <style>
			 div{
				 width: 300px;
				 height: 300px;
			
			 }
			 div.box1{
				 background: url(img/1.png);
				 background-size: 100%;
				 position: absolute;
				 top: 0px;
				 left: 0px;
				/* 叠加属性 */
				 z-index: 2;
				 

			 }
			 div.box2{
			 	 background: url(img/2.png);
				 background-size: 100%;
				 position: absolute;
				 top: 0px;
				 left: 0px;
				 z-index: 6;

			 }
		 </style>
	</head>
	<body>
	    <div class="box1" ></div>
		<div class="box2"></div>
	</body>
</html>